import React from 'react';
import '../assets/style/home.scss';
import { getuserlist, getusercreat, noticefind } from '../util/api';
import echarts from 'echarts/lib/echarts';
import 'echarts/lib/chart/line';
import dayjs from "dayjs";
import { Table, Empty  } from 'antd';
// 引入提示框和标题组件
import 'echarts/lib/component/tooltip';
import 'echarts/lib/component/title';
import 'echarts/lib/component/legend';
import 'echarts/lib/component/markPoint';


class Home extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            users: null,
            allchart: null,
            userchart: null,
            num: null
        }
    }
    componentDidMount(){
        var allChart = echarts.init(document.getElementById('main'));
        var userChart = echarts.init(document.getElementById('usercreat'));
        this.setState({
            allchart: allChart,
            userchart: userChart,
        })
        this.getuserlist()
        this.getusercreat()
        this.noticefind()
        // 绘制图表
    }

    async noticefind(){
        const res = await noticefind()
        const { success, data } = res.data
        if(success){
            this.setState({
                lilist: data
            })
        }
    }

    async getuserlist() {
        const res = await getuserlist()
        console.info(res)
        const {data} = res.data
        this.setState({
            num: data
        })
        this.state.allchart.setOption({
            title: { text: '作品数量' },
            tooltip: {},
            xAxis: {
                data: ["用户", "作品", "约拍", "场地", "教程"]
            },
            yAxis: {},
            series: [{
                name: '数量',
                type: 'line',
                data: data,
            }]
        });

    }
    async getusercreat(){
        const todaystart = dayjs().format('YYYY-MM-DD ' + '00:00:00')
        const todayend = dayjs().add(1,"day").format('YYYY-MM-DD ' + '00:00:00')
        const yestodaystart = dayjs().subtract(1,"day").format('YYYY-MM-DD ' + '00:00:00')
        const twostart = dayjs().subtract(2,"day").format('YYYY-MM-DD ' + '00:00:00')
        const threestart = dayjs().subtract(3,"day").format('YYYY-MM-DD ' + '00:00:00')
        const fourstart = dayjs().subtract(4,"day").format('YYYY-MM-DD ' + '00:00:00')
        const fivestart = dayjs().subtract(5,"day").format('YYYY-MM-DD ' + '00:00:00')

        const todaynews = dayjs(todaystart).valueOf()
        const todayends = dayjs(todayend).valueOf()
        const yestodaynews = dayjs(yestodaystart).valueOf()
        const twonews = dayjs(twostart).valueOf()
        const threenews = dayjs(threestart).valueOf()
        const fournews = dayjs(fourstart).valueOf()
        const fivenews = dayjs(fivestart).valueOf()
        const res = await getusercreat(todaynews,todayends,yestodaynews,twonews,threenews,fournews,fivenews)
        const { data } = res.data
        console.info(data)
        this.state.userchart.setOption({
            title: { text: '用户注册量' },
            tooltip: {},
            xAxis: {
                data: ["5天前","4天前","3天前","2天前","1天前","今天"]
            },
            yAxis: {},
            series: [{
                name: '数量',
                type: 'line',
                data: data,
            }]
        });

    }



    render() {
        const columns = [
            {
                title: '用户',
                dataIndex: 'username',
                key: 'username',
                render: text => <a>{text}</a>,
            },
            {
                title: '时间',
                dataIndex: 'logintime',
                key: 'logintime',
            },
        ]
        const data = [
            {
                key: '1',
                username: 'John Brown',
                logintime: '2020-11-05 17:12:30',
            },
        ]
        const li = []
        const { lilist } = this.state
        if(lilist){
            lilist.map((r,index)=>{
                if(index <= 4){
                    li.push(
                        <li><span>{r.noticemsg}</span><span className="spanright">{dayjs(r.addtime).format('YYYY-MM-DD')}</span></li>
                    )
                }
            })
        }
        return(
            <div className="home">
                <div className="home-title">
                    <div id="main" style={{ width: 300 }}></div>
                    <div id="usercreat"></div>
                </div>
                <div className="home-cont">
                    <div className="cont-box">
                        <div className="box-top">
                            <span>通知公告</span>
                            <span>更多</span>
                        </div>
                        <div className="box-content">
                            <ul>
                                {li}
                            </ul>
                        </div>
                    </div>
                    <div className="cont-box">
                        <div className="box-top">
                            <span>作品模块</span>
                        </div>
                        <div className="box-content">
                            <div className="cont-sh">
                                <div className="shbox" style={{ backgroundColor: "#39cf88" }}>
                                    <p>待审核作品</p>
                                    <p>{this.state.num?this.state.num[1]:0}</p>
                                </div>
                                <div className="shbox" style={{ backgroundColor: "#fd4545" }}>
                                    <p>待审核约拍</p>
                                    <p>{this.state.num?this.state.num[2]:0}</p>
                                </div>
                            </div>
                            <div className="cont-sh">
                                <div className="shbox" style={{ backgroundColor: "#6d80ec" }}>
                                    <p>待审核教程</p>
                                    <p>{this.state.num?this.state.num[4]:0}</p>
                                </div>
                                <div className="shbox" style={{ backgroundColor: "#f1a631" }}>
                                    <p>待审核场地</p>
                                    <p>{this.state.num?this.state.num[3]:0}</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div className="cont-box">
                        <div className="box-top">
                            <span>登录日志</span>
                        </div>
                        <div className="box-content">
                            <Table align="center" columns={columns} dataSource={data} />
                        </div>

                    </div>
                </div>
                <Empty style={{marginTop: 20}} description={<span>更多功能敬请期待...</span>} />
            </div>
        )
    }
}
export default Home;
